<template>
  <div>
    <!-- <input id="chat-message-input" type="text" size="100" /><br />
    <input
      id="chat-message-submit"
      type="button"
      value="Send"
      @click="sendmessage()"
    /> -->
      <div v-for="item in msglist" :key="item.id">
          
          {{ item }}

        </div>


        <a-button type="primary" @click="openbox">咨询客服</a-button>


        <a-modal v-model="show" @ok="myok" type="text" size="50"  height='100'>
            
            <p>客服：你好</p>
            <p>客户：你也好</p>
            <input id="chat-message-input" type="text" size="50" /> <a-Button type="primary" id="chat-message-submit"
      value="Send"
      @click="sendmessage()">点咱发送</a-Button><br />
        </a-modal>

  </div>
</template>

<script>
export default {
  data() {
    return {
        show:false,
      //聊天记录
      msglist:[],
      msg: "这是一个变量",
      collapsed: false,
      //列
      columns:[
        {title:"uid",dataIndex:"uid"},
        {title:"username",dataIndex:"username"},
        //指定操作列
        {title:'operation',dataIndex:'operation',
        scopedSlots:{customRender:'operation'}
        }
      ],
      //数据
      dataSource:[
        {key:'1',uid:1,username:"小红"},
        {key:'2',uid:2,username:"小王"}
      ]
    };
  },
  methods: {
    sendmessage() {
      window.s.send(document.getElementById("chat-message-input").value);
    },
    myok:function(){

        this.show = false;
    },
    openbox:function(){
        this.show = true;
    },
    //删除操作
    onDelete(key) {
      console.log(key);
    }
  },
  created() {
    //生成socket对象
    var socket = new WebSocket(
        URL="ws://localhost:8000/z/test_socket/"
    );

    socket.onopen = function () {
      console.log("WebSocket open"); //成功连接上Websocket
    };
    socket.onmessage = function (e) {
      console.log("message: " + e.data); //打印服务端返回的数据
    };
    socket.onclose = function (e) {
      console.log(e);
      socket.close(); //关闭TCP连接
    };
    if (socket.readyState == WebSocket.OPEN) {
      socket.onopen();
    }
    window.s = socket;
    
  },
};
</script>

<style>
#components-layout-demo-custom-trigger .trigger {
  font-size: 18px;
  line-height: 64px;
  padding: 0 24px;
  cursor: pointer;
  transition: color 0.3s;
}

#components-layout-demo-custom-trigger .trigger:hover {
  color: #1890ff;
}

#components-layout-demo-custom-trigger .logo {
  height: 32px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px;
}

</style>